<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page errorPage="JSP_Error.jsp" %>
<%@ page import="java.util.Enumeration" %>
<%@ page import="com.microstrategy.web.app.beans.PageComponent" %>
<%@ page import="com.microstrategy.web.objects.WebIServerSession" %>
<%@ page import="com.microstrategy.web.app.utils.JavaScriptBundles" %>
<%@ taglib uri="/webUtilTL.tld" prefix="web" %>

<%
PageComponent mstrPage = (PageComponent) request.getAttribute("mstrPage");
%>
<!doctype html>
<html>
<head>
<title>::GMAR::</title>

<web:resource type="custom-javascript" name="jquery-1.9.0.js"/>
<web:resource type="custom-javascript" name="jquery.maskedinput.js"/>
<web:resource type="custom-javascript" name="jquery.mockjax.js"/>
<web:resource type="custom-javascript" name="jquery.validate.js"/>
<web:resource type="custom-javascript" name="uam.schedule.js"/>
<web:resource type="custom-javascript" name="jquery.js"/> 
<web:resource type="custom-javascript" name="jquery.form_3.50.js"/> 
<web:resource type="custom-javascript" name="jquery.easyui.min.js"/>
<web:resource type="custom-javascript" name="uam.utils.js"/>
<web:resource type="custom-javascript" name="uam.sample.data.js"/>
<web:resource type="custom-javascript" name="vupPage.js"/>

<web:resource type="custom-style" name="themes/default/easyui.css"/>
<web:resource type="custom-style" name="themes/icon.css"/> 
<web:resource type="custom-style" name="edituserprofile.css"/>

<style type="text/css">

</style>
<script type="text/javascript">
	window.microstrategy = window.microstrategy || {};
	microstrategy.sessionState = '<%= mstrPage.getWebIServerSession().getSessionID() %>';
</script>
</head>
<body>
	<div>
	    <img src="../plugins/UAM/style/images/Amex.png"></img>
	    <label style="font-size: 30px; font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', sans-serif; color: #232121; font-style: normal; font-weight: lighter;">American Express
	    </label>
	  <hr>
	</div>
	<!-- error message -->
	<div style="display:none;" class="error">
      <img width="24" height="24" style="float:left; margin: -5px 10px 0px 0px; " alt="Warning!" src="images/warning.gif">
      <span></span>.<br clear="all">
    </div>
	<div class="userProfile" style="text-align:center;">
		<span>User Profile</span>
	</div>
<!-- ============================================================================ -->

<form method="post" action="" type="actionForm" id="viewUserProfileForm" novalidate="novalidate">
<div style="border:0px solid red; display:inline-block;width:48%;float:left;padding:10px 0px 0px 10px;">
	
	<div class="formContent">
		<div>
		  	<span>MicroStrategy Access Type *:</span><input type="text" name="mstrAccType" id="mstrAccType" disabled>
		</div>
		<div>
			<span>MicroStrategy Product Select *</span> 
			<select style="height: 80px" id="mstrProdAvl" name="mstrProdAvl" multiple>
				<!-- 
				<option value="1" ondblclick="javascript:addSrcToDestList()">Dashboard</Option>
				<option value="2" ondblclick="javascript:addSrcToDestList()">MARC</Option>
				<option value="3" ondblclick="javascript:addSrcToDestList()">ICARD</Option>
				 -->
			</select>
			<div style="display:inline-block;">
		    <input type="button" value="&gt;&gt;" onclick="addSrcToDestList()" name="button" ></input><br><br>
		    <input type="button" value="&lt;&lt;" onclick="deleteFromDestList()" name="button" style="margin-top:15px;" ></input>
		    </div>
		    <!-- mstrProdSel -->
		    <select style="height:80px; width:100px;"id="mstrProdSel" name="mstrProdSel"  multiple></select>
		</div>
		
		<div>
			<span>Amex Web ID *:</span><input type="text" name="amexWebId" id="amexWebId" disabled></input>
		</div>
		
		<div>
			<span>First Name *:</span><input type="text" name="firstName" id="firstName" disabled></input>
		</div>
		<div>
			<span>Middle Initial:</span><input type="text" name="midName" id="midName" disabled></input>
		</div>
		<div>
			<span>Last Name:</span><input type="text" name="lastName" id="lastName" disabled></input>
		</div>
		<div>
			<span>Employee/Contractor ID:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="empOrContractorId" id="empOrContractorId"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
		</div>
		<div>
			<span>Department ID *:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="deptId" id="deptId"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
		</div>
		<div>
			<span>Department Description *:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="deptDesc" id="deptDesc"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		<div>
			<span>Business Unit Code *:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="bizUnitCode" id="bizUnitCode"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		<div>
			<span>Business Unit Description *:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="bizUnitDesc" id="bizUnitDesc"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		<div>
			<span>AMEX Unit Code *:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="amexUnitCode" id="amexUnitCode"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		<div>
			<span>AMEX Unit Description *:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="amexUnitDesc" id="amexUnitDesc"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		
		<div>
			<span>Cost Center *:</span>
			<input type="text" name="costCen" id="costCen" disabled></input>
		</div>
		
		<div>
			<span>Phone # *:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" value="" name="phone" id="phone" maxlength="14"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
		</div>
		<div>
			<span>Email Address*:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" id="email" name="email" ></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		<div>
			<span>Manager First Name *:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="mgr1stName" id="mgr1stName"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		<div>
			<span>Manager Middle Initial:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="mgrMidInit" id="mgrMidInit"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		<div>
			<span>Manager Last Name*:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="mgrLastName" id="mgrLastName"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		<div>
			<span>Manager Email Address*:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="mgrEmail" id="mgrEmail"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
		</div>
		<div>
			<span>VP Name*:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="vpName" id="vpName"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
		</div>
		<div>
			<span>Reason For Access*:</span>
			<div class="field" style="display:inline-block;">
				<input type="text" name="reasonForAcc" id="reasonForAcc"></input>
			</div>
			<div class="status" style="display:inline-block;"></div>
			
		</div>
		<div>
			<span>MCS User:</span>
			<div class="field" style="display:inline-block;">
				<input type="checkbox" name="mcsUser" id="mcsUser" />
			</div>
			<div class="status" style="display:inline-block;"></div>
		</div>
		<!-- <div>
			<span>Access Status:</span>
			<input type="text" name="accStat" id="accStat" disabled></input>
		</div> -->
		<div>
			<span>Access Status Date:</span>
			<input type="text" name="accStatDate" id="accStatDate" disabled></input>
		</div>
		<div>
			<span>Manager Approval:</span>
			<div class="field" style="display:inline-block;">
				<select name="mgrApproval" id="mgrApproval">
					<option>1</option>
					<option>2</option>
				</select>
			</div>
			<div class="status" style="display:inline-block;"></div>
		</div><br>
	</div>
</div>


<div style="border:0px solid red; display:inline-block;height:500px;width:48%;margin:0px 0px 0px 20px;padding-left:10px;">
	<div class="formContent">
		<div  class="inputGroup">
			<span style="float:left;">Functional Group/Role</span>
			<div style="display: inline-block;">
				<div class="funcGroup" id="funcGrpRoleContainer"></div>
				<div class="status"></div>
			</div>
		</div>
		<div>
			<span>CLM Hierarchy:</span>Unrestricted User<input type="checkbox" name="clmHier" id="clmHier" onclick="return false;"></input>
		</div>
		<div>
			<span>CLM ID:</span><input type="text" name="clmId" id="clmId" />
		</div>
		<div>
			<span>LIF Governance:</span>
			Global<input type="radio" name="lifGov" value="Y" />
		  	Region/Country<input type="radio" name="lifGov" value="N" onclick="$('#lifCRDialog').dialog('open')"/>
		</div>
		<div class="inputGroup">
			<span style="float:left;">Approved Security Group</span>
			<div style="display: inline-block;">
				<div class="securityGroup" id="scyGrp">
					<!-- <input type='checkbox' name='securityGroup'> -->			   
				</div>
				<div class="status"></div>
			</div>
		</div>
		<div>
			<span>MARC Geography:</span>
			Global<input type="checkbox" id="marcGeoGlobal" name="marcGeoGlobal"  />
		  	Region/Country<input type="checkbox" id="marcGeoCountryRegion" name="marcGeoCountryRegion" 
		  		onclick="this.checked && $('#crDialog').dialog('open');$('#regionNamesDiv').show();$('#countryNamesDiv').show();"/>
		</div>
		<div id="countryNamesDiv" style="display: none;">
			<span>Region</span>
			<div style="display: inline-block;">
				<textarea id="countryNames" name="countryNames" style="width: 200px; height: 150px; "></textarea>
				<button onclick="$('#crDialog').dialog('open');return false;">Edit List</button>
			</div>
		</div>
		<div id="regionNamesDiv" style="display: none;">
			<span>Country</span>
			<textarea id="regionNames" name="regionNames" style="width: 200px; height: 150px;"></textarea>
		</div>
	</div>
</div>	
<div class="buttonSubmit" style="clear:both; text-align:center;">
	<input type="submit" tabindex="14" class="formButton" style="width:140px" name="update" id="update" value="Update Profile"></input>
  	<input type="button" name="cancel" id="cancel" value="Cancel"></input>	
</div>

<!-- Country/Region Configuration Dialog Begin (MARC Geo)-->

<div id="crDialog" class="easyui-dialog" title="Pick the Regson/Country" data-options="iconCls:'icon-save',modal:true" style="width:600px;height:450px;padding:10px;">
	<div style="width: 250px; float: left;" >
		<div>Select Country</div>
		<div id="countries" style="width: 250px; height: 300px; overflow: auto; border: 1px #95B8E7 solid"></div>
	</div>
	<div style="width: 250px; float: left; margin-left: 35px;">
		<div>Select Region</div>
		<div id="regions" style="width: 250px; height: 300px; overflow: auto; border: 1px #95B8E7 solid"></div>
	</div>
	<div><button onclick="$('#crDialog').dialog('close');uam.vup.task.onCountryAndRegionSave();">OK</button>
		 <button style="margin-left: 50px;" onclick="$('#crDialog').dialog('close');">Cancel</button>
	</div>
	
</div>
<!-- Country/Region Configuration Dialog End (MARC Geo) -->

<!-- Country/Region Configuration Dialog Begin (LIF Goverance) -->

<!-- <input type="hidden" id="lifCountryNames" name="lifCountryNames">
<input type="hidden" id="lifRegionNames" name="lifRegionNames"> -->

<div id="lifCRDialog" class="easyui-dialog" title="Pick the Regson/Country" data-options="iconCls:'icon-save',modal:true" style="width:600px;height:450px;padding:10px;">
	<div style="width: 250px; float: left;" >
		<div>Select Country</div>
		<div id="lifCountries" style="width: 250px; height: 300px; overflow: auto; border: 1px #95B8E7 solid"></div>
	</div>
	<div style="width: 250px; float: left; margin-left: 35px;">
		<div>Select Region</div>
		<div id="lifRegions" style="width: 250px; height: 300px; overflow: auto; border: 1px #95B8E7 solid"></div>
	</div>
	<div><button onclick="$('#lifCRDialog').dialog('close');uam.vup.task.onLifCountryAndRegionSave();">OK</button>
		 <button style="margin-left: 50px;" onclick="$('#lifCRDialog').dialog('close');">Cancel</button>
	</div>
	
</div>
<!-- Country/Region Configuration Dialog End (LIF Goverance) -->



</form>

</body>
</html>
